<template>
  <div style="height: 400px">
    <el-row>
      <el-col :span="6">
        <el-button plain type="primary" @click="addMenu()">新增</el-button>
        <el-button plain type="primary" @click="openData()">刷新</el-button>
        <el-button plain type="primary" @click="pushWXMenu()"
          >菜单推送</el-button
        >
      </el-col>
      <el-col :span="12">
        <div align="center" style="margin-top: 10px; color: red">
          当前微信AppID【{{ FWXAppID }}】
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="微信菜单配置"
      v-model="FShowEdit"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="800"
      destroy-on-close
      :show-close="1 == 2"
    >
      <TFormWXMenuEdit
        :zContextParams="FEditParams"
        :zContextOnCall="editCallBack"
      ></TFormWXMenuEdit>
    </el-dialog>
    <div style="height: 15px"></div>
    <el-table
      :data="FMenuTreeList"
      height="100%"
      style="width: 100%; overflow-y: auto"
      default-expand-all
      highlight-current-row
      row-key="FMenuID"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="FMenuType" label="菜单类型"> </el-table-column>
      <el-table-column prop="FMenuName" label="菜单名称"> </el-table-column>
      <el-table-column prop="FMenuKey" label="菜单键值"> </el-table-column>
      <el-table-column prop="FMenuUrl" label="菜单URL"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button
            plain
            type="primary"
            size="mini"
            @click="editWXMenu(scope.row)"
            >菜单编辑</el-button
          >
          <el-button
            plain
            size="mini"
            type="danger"
            @click="delWXMenu(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import BaseForm from "../BaseForm";
import elmHelper from "../model/elmHelper";
import TFormWXMenuEdit from "./WXMenuEdit.vue";
import WXAdminApi, { TWXMenu } from "@/baselib/module/weixin/WXAdminApi";
//配合着用
@Options({
  components: {
    TFormWXMenuEdit,
  },
  data() {},
  methods: {},
})
export default class TFormWXMenuList extends BaseForm {
  private FShowEdit: boolean = false;
  private FEditParams: any = {};
  private FWXAppID: string = "";
  private FMenuList: TWXMenu[] = [];
  private FMenuTreeList: any = [];
  private FIndexMenu: TWXMenu = new TWXMenu();
  public created() {
    this.zIsOpenData = false;
    this.FWXAppID = this.zIndexTag?.menuParams.WXAppID;
    if (this.$myStrHelper.stringIsEmptyYW(this.FWXAppID)) {
      this.$myMsgHelp.msgHintAutoClose("微信AppID不可为空");
      return;
    }
    this.openData();
  }
  private async openData() {
    this.zIsOpenData = false;
    var lResult = await WXAdminApi.GetWXMenuListByAppID(this.FWXAppID);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FMenuList = lResult.resultData;
    this.FMenuTreeList = elmHelper.dataAddchildren(
      this.FMenuList,
      "FMenuID",
      "FPMenuID"
    );
    this.$myMsgHelp.msgHintAutoClose("获取数据成功");
    this.zIsOpenData = true;
  }
  private addMenu() {
    this.FIndexMenu = new TWXMenu();
    this.FIndexMenu.FWXAppID = this.FWXAppID;
    this.FEditParams = { wxMenu: this.FIndexMenu, menuList: this.FMenuList };
    this.FShowEdit = true;
  }
  private editWXMenu(qMenu: any) {
    this.FIndexMenu = qMenu as TWXMenu;
    this.FEditParams = { wxMenu: this.FIndexMenu, menuList: this.FMenuList };
    this.FShowEdit = true;
  }
  private async pushWXMenu() {
    let lResult = await WXAdminApi.PushWXMenuAsync(this.FWXAppID);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.$myMsgHelp.msgHintAutoClose(lResult.resultMsg);
  }
  private async delWXMenu(qMenu: any) {
    let lDelConfirm = await this.$myMsgHelp.msgDialogConfirm("确定删除此菜单");
    if (!lDelConfirm) {
      return;
    }
    let lMenu = qMenu as TWXMenu;
    let lResult = await WXAdminApi.DelWXMenuByMenuID(lMenu.FMenuID);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.$myMsgHelp.msgHintAutoClose(lResult.resultMsg);
  }
  //弹出编辑框，关闭框时回调
  private editCallBack(action: string, qAccount: TWXMenu) {
    if ((action = "close")) {
      this.FShowEdit = false;
      this.openData();
    }
  }
}
</script>

<style>
</style>